<template>
  <div class="stats-wrapper">
    <div class="stats-inner"  :style="innerStyle"  v-if="statsData.child && sortAreaData !== ''"> 
      <Header :batchInfo="statsData.currentBatchTimeLine"></Header>
      <Footer></Footer>
      <div class="stats-box" style="width: 960px;height: 380px;left: 520px; top: 120px;">
        <div class="stats-box-title">{{pointData.areaName}}科学实验考试进度</div>
        <div class="stats-box-body">
          <div class="stats-text">
            <div>
              <span>完成考试人数（人）</span><br>
              <strong>{{pointData.finishedByNormalStuNum + pointData.finishedByResitStuNum}}</strong>
            </div>
            <div>
              <span>未考人数（人）</span><br>
              <strong>{{pointData.waitingStuNum}}</strong>
            </div>
            <div>
              <span>补考人数（人）</span><br>
              <strong>{{pointData.notFinishedByResitStuNum + pointData.finishedByResitStuNum}}</strong>
            </div>
          </div>
          <div class="stats-table" style="top: 120px;">
            <point-table-view :areaData="pointData.child"></point-table-view>
          </div>
        </div>
      </div>
      <div class="stats-box" style="width: 480px;height: 380px;right: 20px; top: 120px;">
        <div class="stats-box-title">各学校参考学生人数排行</div>
        <div class="stats-box-body">
          <div v-for="item,i in sortPointData" v-if="i < 7" class="stats-text-list stats-rank" :key="i"  :rank-num="(i + 1) + '.'">
           <span >{{item.schoolName}}</span>
           <span>{{item.stuNum}}人</span>
          </div>
        </div>
      </div>
      <div class="stats-box" style="width: 480px;height: 380px;left: 20px; top: 120px;">
        <div class="stats-box-title">学生参考比例</div>
        <div class="stats-box-body">
          <echarts-pie  :pointData="pointData"></echarts-pie>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PointTableView from '@/components/stats/PointTableView.vue'
import EchartsPie from '@/components/stats/EchartsPie.vue'

import statsMixin from '@/common/mixins/statsMixin'

export default {
  mixins: [statsMixin],
  components: {
    PointTableView,
    EchartsPie,
  },
  data () {
    return {
    }
  },
  mounted () {
  },
  methods: {
    setAreaData () {
      if (sessionStorage.getItem('area') && sessionStorage.getItem('area') !== 'null') {
        this.currentArea = sessionStorage.getItem('area')
      } else if (sessionStorage.getItem('statsCurrentArea') && sessionStorage.getItem('statsCurrentArea') !== 'null') {
        this.currentArea = sessionStorage.getItem('statsCurrentArea')
      } else {
        this.$router.push('/')
      }
      if (sessionStorage.getItem('schoolName') && sessionStorage.getItem('schoolName') !== 'null') {
        this.currentPoint = sessionStorage.getItem('schoolName')
      } else if (sessionStorage.getItem('statsCurrentPoint') && sessionStorage.getItem('statsCurrentPoint') !== 'null') {
        this.currentPoint = sessionStorage.getItem('statsCurrentPoint')
      } else {
        this.$router.push('/')
      }
      this.statsData = JSON.parse(sessionStorage.getItem('statsData'))
      this.areaData = this.statsData.child.filter(item => item.areaName === this.currentArea)[0]
      this.sortAreaData = this.areaData.child.sort((a, b) => b.finishedByNormalStuNum - a.finishedByNormalStuNum)
      this.pointData = this.areaData.child.filter(item => item.areaName === this.currentPoint)[0]
      this.sortPointData = this.pointData.schoolStuNumList.sort((a, b) => b.finishedByNormalStuNum - a.finishedByNormalStuNum)
    }
  }
}
</script>

<style scoped>

</style>
